<template>
    <div class="zs-card-with-header">
        <div class="zs-card-header">
            <i class="icon-b-item zs-icon zs-text-blue zs-space-right-sm"></i>
            <div class="zs-title">整体指标</div>
        </div>
        <div class="zs-card-content">
            <div class="zs-layout-flex-row zs-layout-justify-between">
                <template v-for="(item, index) in grayCardList" :key="index">
                    <GrayCard class="zs-layout-grow" :class="{ 'zs-space-right': index < grayCardList.length - 1 }" :isBlueCard="true"
                        :list="item.list" :title="item.title"></GrayCard>
                </template>
            </div>
            <hsTableV2 :style="{ 'height': tableHeight + 'px' }" isMultistageHeader :columns="tableData.cloumns"
                :data="tableData.data" fixed :multistageHeaderData="multistageData" :key="test">
            </hsTableV2>
            <div class="zs-text-sm zs-space-top zs-layout-flex-row zs-layout-justify-between">
                <span class="zs-text-gray-dark">{{ unit }}</span>
                <span class="zs-text-gray">数据截止：{{ date }}</span>
            </div>
        </div>
    </div>
</template>
<script setup>
import digitalMonthlyReportApi from '@/api/Manage/Business/digitalMonthlyReport';
import { ref, watch } from 'vue';
import GrayCard from '@/DbUiComponents/grayCard'

const props = defineProps({
    isFresh: {
        type: String,
        required: false,
        default: ''
    },
    biProjectCode: {
        type: String,
        required: false,
        default: ''
    },
    yearmonth: {
        type: String,
        required: false,
        default: ''
    }
})

// const grayCardList = ref([
//     {
//         title: '1-6月收入',
//         list: [
//             { label: '预算', value: '7010', isThousand: true, unit: '', color: '1', des: '' },
//             { label: '实际', value: '7790', unit: '', color: '' },
//             { label: '完成率', value: '112', unit: '%', color: '' },
//             { label: '完成率', value: '112', unit: '%', color: '' },
//         ]
//     },
//     {
//         title: '1-6月收入',
//         list: [{ label: '预算', value: '7,010', unit: '%', color: '1', des: '' }, { label: '实际', value: '7,790', unit: '', color: '' }, { label: '完成率', value: '112', unit: '%', color: '' }]
//     },
//     {
//         title: '1-6月收入',
//         list: [{ label: '预算', value: '7,010', unit: '%', color: '1', des: '' }, { label: '实际', value: '7,790', unit: '', color: '' }, { label: '完成率', value: '112', unit: '%', color: '' }]
//     }
// ])


const grayCardList = ref([])
const unit = ref()
const date = ref()


let tableHeight = ref()
const windowWidth = document.documentElement.scrollWidth;
let celWidth = (windowWidth - 138 - 60 - 160) / 13
let test = ref(0)
let tableData = ref({
    loading: false,
    data: [],
    cloumns: [
        {
            key: "index",
            dataKey: "index",
            title: "序号",
            align: "left",
            width: 60,
            cellRenderer: ({ rowIndex }) => (
                rowIndex + 1
            )
        },
        {
            key: "subjectName",
            dataKey: "subjectName",
            title: "指标",
            width: 160,
            align: "left",
            cellRenderer: ({ rowData }) => (
                rowData.subjectName
            )
        },
        // 当前月
        {
            key: "monthBudget",
            dataKey: "monthBudget",
            title: "预算",
            align: "right",
            width: celWidth,
            parentKey: 'multColA',
            cellRenderer: ({ rowData }) => (
                rowData.monthBudget
                // rowData.testVV &&
                // (<ElTooltip content={rowData.testVV} placement="top">{rowData.testVV}</ElTooltip>)
            )
        },
        {
            key: "monthActual",
            dataKey: "monthActual",
            title: "实际",
            align: "right",
            width: celWidth,
            parentKey: 'multColA',
            cellRenderer: ({ rowData }) => (
                rowData.monthActual
            )
        },
        {
            key: "monthPc",
            dataKey: "monthPc",
            title: "完成率",
            align: "right",
            width: celWidth,
            parentKey: 'multColA',
            cellRenderer: ({ rowData }) => (
                <span class={{ 'zs-text-red': rowData.monthPcColor == 1 }}>{rowData.monthPc}</span>
            )
        },
        {
            key: "yearErlier",
            dataKey: "yearErlier",
            title: "同比",
            align: "right",
            width: celWidth,
            parentKey: 'multColA',
            cellRenderer: ({ rowData }) => (
                rowData.yearErlier
            )
        },
        {
            key: "monthBreachValue",
            dataKey: "monthBreachValue",
            title: "缺口",
            align: "right",
            width: celWidth,
            parentKey: 'multColA',
            cellRenderer: ({ rowData }) => (
                rowData.monthBreachValue
            )
        },
        // 1-当前月
        {
            key: "accMonthBudget",
            dataKey: "accMonthBudget",
            title: "预算",
            align: "right",
            width: celWidth,
            parentKey: 'multColB',
            cellRenderer: ({ rowData }) => (
                rowData.accMonthBudget
            )
        },
        {
            key: "accMonthActual",
            dataKey: "accMonthActual",
            title: "实际",
            align: "right",
            width: celWidth,
            parentKey: 'multColB',
            cellRenderer: ({ rowData }) => (
                rowData.accMonthActual
            )
        },
        {
            key: "accMonthPc",
            dataKey: "accMonthPc",
            title: "完成率",
            align: "right",
            width: celWidth,
            parentKey: 'multColB',
            cellRenderer: ({ rowData }) => (
                <span class={{ 'zs-text-red': rowData.accMonthPcColor == 1 }}>{rowData.accMonthPc}</span>
            )
        },
        {
            key: "accYearErlier",
            dataKey: "accYearErlier",
            title: "同比",
            align: "right",
            width: celWidth,
            parentKey: 'multColB',
            cellRenderer: ({ rowData }) => (
                rowData.accYearErlier
            )
        },
        {
            key: "accMonthBreachValue",
            dataKey: "accMonthBreachValue",
            title: "缺口",
            align: "right",
            width: celWidth,
            parentKey: 'multColB',
            cellRenderer: ({ rowData }) => (
                rowData.accMonthBreachValue
            )
        },

        // 本年度
        {
            key: "yearBudget",
            dataKey: "yearBudget",
            title: "预算",
            align: "right",
            width: celWidth,
            parentKey: 'multColC',
            cellRenderer: ({ rowData }) => (
                rowData.yearBudget
            )
        },
        {
            key: "yearForecast",
            dataKey: "yearForecast",
            title: "实际",
            align: "right",
            width: celWidth,
            parentKey: 'multColC',
            cellRenderer: ({ rowData }) => (
                rowData.yearForecast
            )
        },
        {
            key: "yearPc",
            dataKey: "yearPc",
            title: "完成率",
            align: "right",
            width: celWidth,
            parentKey: 'multColC',
            cellRenderer: ({ rowData }) => (
                rowData.yearPc
            )
        },
    ],
});

let multistageData = {}
const initMultistageData = (queryTime) => {
    const yearmonth = queryTime ? queryTime : '暂无-暂无'
    const year = yearmonth.split('-')[0]
    let month = yearmonth.split('-')[1]
    month[0] == 0 ? month = month.substring(1, 2) : ''

    multistageData['multColA'] = {
        key: 'multColA',
        title: `${year}年${month}月`,
        childrenIndex: [2, 3, 4, 5, 6]
    }
    multistageData['multColB'] = {
        key: 'multColB',
        title: `${year}年1-${month}月`,
        childrenIndex: [7, 8, 9, 10, 11]
    }
    multistageData['multColC'] = {
        key: 'multColC',
        title: `${year}年度`,
        childrenIndex: [12, 13, 14]
    }
    test.value++
}

const getData = () => {
    digitalMonthlyReportApi.overAllTargetApi({ dataTime: props.yearmonth, projectCode: props.biProjectCode }).then(res => {
        if (res.data.code == 200) {
            unit.value = res.data.data.unit
            date.value = res.data.data.date
            grayCardList.value = res.data.data.card
            tableData.value.data = res.data.data.table
            tableHeight.value = tableData.value.data.length * 37 + 72
        }
    });
}

watch(() => { props.isFresh }, () => {
    initMultistageData(props.yearmonth)
    getData()
}, { deep: true, immediate:true });

</script>

<style scoped lang="scss"></style>
